<template>
  <div class="page">
    <Header />
    <el-container>
      <el-header>
        <el-row style="margin-top: 10px">
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <img src="../../assets/logo.png" height="35" @click="toHome" />
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light">
              <el-input
                placeholder="请输入内容"
                v-model="keyword"
                clearable
              ></el-input>
              <el-button
                icon="el-icon-search"
                style="width: 100px; height: 38px"
                @click="searchByKeyWord(1)"
                >搜索
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <!-- 品牌分类 -->
          <form class="navAttrsForm">
            <div class="attrs j_NavAttrs" style="display: block">
              <div class="brandAttr j_nav_brand">
                <div class="j_Brand attr">
                  <div class="attrKey">品牌</div>
                  <div class="attrValues">
                    <ul class="av-collapse row-2">
                      <li><a href="#"> 新华</a></li>
                      <!--                                        <li><a href="#"> Java </a></li>-->
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </form>
    <!-- 排序规则 -->
    <div class="filter clearfix">
            <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
            <a class="fSort"
              >价格<i class="f-ico-triangle-mt"></i>
              <i class="f-ico-triangle-mb"></i>
            </a>
          </div>
    <div id="mallPage" class="mallist tmall- page-not-market" style="margin-top: 20px">
      <!-- 商品详情页面 -->
      <div id="content">
        <div class="main">
          <div class="view grid-nosku">
    <div
      class="product"
      v-for="product in productList"
      :key="product.productId"
    >
      <div class="product-iWrap">
        <div class="productImg-wrap">
          <router-link :to="'product-detail?productId=' + product.productId">
            <img
              :src="product.productImg.length === 0 ? null : product.productImg"
              alt="Product Image"
            />
          </router-link>
        </div>
        <p class="productPrice">
          <em><b>¥</b>{{ product.price.toFixed(2)}}</em>
        </p>
        <p class="productTitle">
          <a v-html="product.productName"></a>
        </p>
        <div class="productShop">
          <span>店铺：新华书店</span>
        </div>
      </div>
    </div>
    </div>

         <!-- 分页组件 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNow"
      @current-change="searchByKeyWord"
      @size-change="handleSizeChange(pageNow)"
      :page-sizes="[1, 10, 15, 20]"
    ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "../../components/front/Header.vue";

export default {
  name: "Search.vue",
  data() {
    return {
      keyword: this.$route.params.keyword,
      total: 0,        // 总数据量
      pageSize: 10,    // 每页显示条数
      pageNow: 1,      // 当前页码
      productList: [], // 当前页的数据
    };
  },
  methods: {
    toHome() {
      this.$router.push({
        path: "/",
      });
    },

    // 根据关键字进行搜索
    searchByKeyWord(page) {
      // let that = this;
      this.pageNow = page;
      axios
        .get("/findProductByName", {
          params: {
            pageNow: this.pageNow, // 当前页码
            pageSize: this.pageSize, // 当前一页大小
            productName: this.keyword, // 搜索title请求
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          },
        })
        .then((res) => {
          console.log("res",res)
          if (!res.data.message) {
            alert("不好意思没有该书的信息，请联系管理员KK");
            return;
          }
          // 更新商品列表和总页数
          this.productList = res.data.data.data.products;
          this.total = res.data.data.data.productCount;
        });
    },
    
    prevClick() {
      if (this.pageNow > 1) {
        this.pageNow--;
        this.searchByKeyWord(this.pageNow);
      }
    },

    nextClick() {
      this.pageNow++;
      this.searchByKeyWord(this.pageNow);
    },

    currentChange(page) {
      this.pageNow = page;
      this.searchByKeyWord(page);
    },
    // 每页显示条数改变时
    handleSizeChange(val) {
      this.pageSize = val;  // 更新每页条数
      this.getProduct(1);    // 从第一页开始获取数据
    },
    // 添加到购物车
    addToCart(item) {
      console.log("添加商品到购物车", item);
      // 这里可以实现将商品加入购物车的逻辑
    },
  },
  components: {
    Header,
  },

  created() {
    this.searchByKeyWord();
  },
};
</script>

<style scoped src="../../assets/css/style.css"></style>
<style scoped>
.el-input {
  width: 500px;
  margin-right: 20px;
}

.el-header {
  background-color: rgb(200, 9, 9);
  color: #333;
  text-align: center;
}
</style>
